<template>
	<div>

		<!-- 导航条 -->
		<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item',item.id==1?'mui-active':''] " href="#item1mobile" data-wid="tab-top-subpage-1.html" v-for="item in categories" :key="item.id"
						 @tap="getPhotos(item.id)">
							{{ item.name }}
						</a>
					</div>
				</div>
		</div>

		<!-- 内容区lazy load 组件 -->
        <ul class="photo-list">
          <router-link v-for="item in list" :key="item.id" :to="'/home/PhotoInfo/'+cateId+'/'+item.id" tag="a">
            <img v-lazy="item.images[0]">
          </router-link>
        </ul>

	</div>
</template>

<script>
	//导入MUI的js文件
 	import mui from '../../lib/mui/js/mui.js'	

 	//提示框的js文件
 	import { Toast } from 'mint-ui';

	export default {
		data(){
			return {
				categories:[],
				list:[],
				cateId:1,
			}
		},
		methods:{
			getCategories(){
				//vue-resource的ajax地址不能以“/”开头
				this.$http.get("").then((result)=>{					
					if(result.body){
						console.log(result.body);
						this.categories = result.body;
						
					}else{
						Toast("加载轮播图失败！")
					}
				})
			},
			getPhotos(id){
				this.cateId=id;
				//vue-resource的ajax地址不能以“/”开头
				this.$http.get(id+"/shops?_limit=10&_pages=1").then((result)=>{					
					if(result.body){
						console.log(result.body);
						this.list = result.body;
						
					}else{
						Toast("加载轮播图失败！")
					}
				})
			}
		},
		created(){
			this.getCategories()
			this.getPhotos(1)
		},
		mounted(){
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
		}
	}
</script>

<style lang="scss" scoped>
	ul {
		list-style: none;
		padding: 0px;
		margin: 0px;

		img {
			width: 100%;
			height: 100%;
		}
	}
	*{
		touch-action:none;
	}
	img[lazy=loading] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
</style>